<!--退出登录  直接 @click="$router.push('/login')"  就可以跳转到登录页面-->
<template>
  <div style="height:50px; line-height: 50px; border-bottom: 1px solid #ccc; background-color: #545C64; display: flex">
    <div style="width:200px; padding-left: 30px; font-weight: bold; color: #efeff3">管理系统</div>
    <div style="flex: 1"></div>
    <div style="width:100px;">
      <el-dropdown>
      <span class="el-dropdown-link">
        <span style="color: #efeff3">{{user.username}}</span><i class="el-icon-arrow-down el-icon--right"></i>
      </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="userinfo">个人信息</el-dropdown-item>
            <el-dropdown-item @click="$router.push('/login')">退出系统</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>


  <div>
    <el-dialog title="用户详情"  v-model="dialogVisible"   width="30%">
      <el-form :model="user" label-width="120px">
        <el-form-item label="姓名:">
          <el-input v-model="user.username" style="width:80%" readonly></el-input>
        </el-form-item>

        <el-form-item label="昵称:">
          <el-input v-model="user.nickName" style="width:80%" readonly></el-input>
        </el-form-item>

        <el-form-item label="年龄:">
          <el-input v-model="user.age" style="width:80%" readonly></el-input>
        </el-form-item>

        <el-form-item label="性别:" >
          <el-radio v-model="user.sex" label="男" disabled >男</el-radio>
          <el-radio v-model="user.sex" label="女" disabled >女</el-radio>
        </el-form-item>

        <el-form-item label="地址:">
          <el-input type="textarea" v-model="user.address" style="width:80%" readonly></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: "Header",
  data(){
    return {
      user: JSON.parse(sessionStorage.getItem("user")),
      dialogVisible:false,
    }
  },

  created() {
    console.log("头部信息中的用户......"+sessionStorage.getItem("user"))
  },

  methods:{
    userinfo(){
      //弹窗并显示内容
      this.dialogVisible=true;
      this.user=JSON.parse(sessionStorage.getItem("user"));  //将编辑的弹窗附上值
    },
  }


}
</script>

<style scoped>

</style>